<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" :refresher-enabled="false" :auto="false">
			<view class="bgc" slot="top">
				<u-navbar :fixed="false" :title="title" :autoBack="true" bgColor="transparent"></u-navbar>
				<view class="search">
					<u--input :placeholder="$t('home.search')" @confirm="getInput" border="none" suffixIcon="search"
						suffixIconStyle="size:20px" v-model="keyword"></u--input>
				</view>
			</view>
			<view class="list">
				<storeItem :item="item" v-for="(item,index) in dataList" :key="index" @goDetail="goDetail"></storeItem>
			</view>
		</z-paging>
		<language></language>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				dataList: [],
				title: "",
				id: 0,
				keyword:""
			};
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.title = e.title
				this.$refs.paging.reload()
			}
		},
		computed:{
			...mapGetters(['isLogin'])
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.$http.post('index/searchIndex', {
					limit: pageSize,
					pagr: pageNo,
					category_id: this.id,
					keywords:this.keyword
				}).then(res=>{
					res.code==1 ? this.$refs.paging.complete(res.data.shop.data) : this.$refs.paging.complete(false)
				})
			},
			getInput(){
				this.$refs.paging.reload()
			},
			goDetail(item) {
				this.isLogin ? uni.$u.route('/pagesA/home/merchantDetail?id=' + item.id) : uni.$u.route('/pagesA/my/login')
			},
		}
	}	
</script>
<style>
	page{
		background-color: #f4f4f5;
	}
</style>
<style lang="scss" scoped>
	/deep/.u-icon__icon {
		font-size: 28px !important;
	}

	.bgc {
		background-image: url();
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 250rpx;
		position: relative;

		.search {
			position: absolute;
			left: 50%;
			bottom: -20px;
			width: 90%;
			transform: translateX(-50%);
			background-color: #fff;
			border-radius: 88rpx;
			box-shadow: 0px 9px 19px 0px rgba(218, 218, 218, 0.5);
			padding: 25rpx 40rpx;
			z-index: 10080 !important;
			box-sizing: border-box;
		}
	}
	.list{
		margin-top: 80rpx;
		padding: 0 30rpx;
	}
</style>
